<template>
  <div style="padding:20px;overflow-y: auto;background-color: #ffffff">
    <nb-table :columns="columns" :data="tableList">
      <template v-slot:opt="slotProps">
        <el-button type="primary">编辑{{ slotProps.row.regionName }}</el-button>
      </template>
    </nb-table>
  </div>
</template>
<script>
import NbTable from './index.vue'

export default {
  components: {
    'nb-table': NbTable
  },
  data() {
    return {
      tableList: {
        total: 100,
        rows: [

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          },

          {
            'zhibiaomingcheng': '城市内河考核断面水质达标率',
            'regionName': '六安市',
            'kaoheshijian': '2020年8月',
            'kaohejieguo': '79.5%',
            'targetval': '82%',
          }
        ],
      },
      columns: [
        { 'label': '指标名称', 'field': 'zhibiaomingcheng' },
        { 'label': '考核区划', 'field': 'regionName' },
        { 'label': '考核时间', 'field': 'kaoheshijian' },
        { 'label': '考核结果', 'field': 'kaohejieguo' },
        { 'label': '目标值', 'field': 'targetval' },
        { 'label': '未达成原因', 'slot': 'opt' }
      ]
    }
  },
  computed: {}
}
</script>
<style lang="scss">
.swiper {
  width: 100%;
  height: 600px;
}

swiper-slide {
  width: 100%;
  height: 600px;
}

.swiper-pagination {
  position: absolute;
  right: 0;
  top: 0;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  text-align: center;
  line-height: 12px;
  font-size: 12px;
  color: #000000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
  color: #ffffff;
  background: #0089fc;
}
</style>
